<!DOCTYPE html>
<html lang="zh-cn" >
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="author"
      content="awesome404"
    />
      
    <title>Vue2入门 ｜ 鹊木笔记</title>
    
    
    
    <meta name="description" content="声明 教学视频链接为: Vue 教学视频 点击观看 目前 Vue 分类中部分文章内容参考至 B 站一个 Vue 教学视频 其中部分内容直接出至教学视频中老师 PPT 中的内容 因为本人是第一次学习 Vue，难免文章中会出现纰漏，还望指正 下面为本篇文" />
      
    <meta
      name="keywords"
      content="Blog, 程序员, 前端"
    />
      <link
    rel="shortcut icon" href="https://awesome404.gitee.io/images/favicon.ico" />

    <link
      rel="stylesheet"
      type="text/css"
      media="screen"
      href="https://awesome404.gitee.io/css/normalize.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      media="screen"
      href="https://cdn.jsdelivr.net/npm/animate.css@4.1.0/animate.min.css"
    />
    <link rel="stylesheet" type="text/css" media="screen" href="https://awesome404.gitee.io/css/zozo.css" />
    <link
      rel="stylesheet"
      type="text/css"
      media="screen"
      href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
    />
    <link rel="stylesheet" type="text/css" media="screen" href="https://awesome404.gitee.io/css/highlight.css" />

    
    
  </head>
</html>


<body>
    <div class="main animate__animated animate__fadeInDown">
        
<div class="nav_container animated fadeInDown">
  <div class="site_nav" id="site_nav">
    <ul>
      
      <li>
        <a href="/">首页</a>
      </li>
      
      <li>
        <a href="/posts/">归档</a>
      </li>
      
      <li>
        <a href="/tags/">标签</a>
      </li>
      
      <li>
        <a href="/about/">关于</a>
      </li>
      
    </ul>
  </div>
  <div class="menu_icon">
    <a id="menu_icon">
      <i class="ri-settings-line"></i>
    </a>
  </div>
</div>

        <div class="header animated fadeInDown">
  <div class="site_title_container">
    <div class="site_title">
      <h1>
        <a href="https://awesome404.gitee.io">
          <span>鹊木笔记</span>
        </a>
      </h1>
    </div>
    <div class="description">
      <p class="sub_title">
        前端菜鸡的自我修养
      </p>
      <div class="my_socials">
         
        <a href="https://github.com/404Awesome" title="github" target="_blank"
          ><i class="ri-github-fill"></i
        ></a>
         
        <a
          href="https://awesome404.gitee.io/index.xml"
          type="application/rss+xml"
          title="rss"
          target="_blank"
          ><i class="ri-rss-fill"></i
        ></a>
      </div>
    </div>
  </div>
</div>

        <div class="content">
            <div class="post_page">
                <div class="post animate__animated animate__fadeInDown">
                    <div class="post_title post_detail_title">
                        <h2><a href='/posts/vue2%E5%85%A5%E9%97%A8/'>Vue2入门</a></h2>
                        <span class="date">2020.04.06</span>
                    </div>
                    <div class="post_content markdown"><h1 id="声明">声明</h1>
<blockquote>
<p>教学视频链接为:  <a class="alert-link" href="https://www.bilibili.com/video/BV15741177Eh/" target="_blank">Vue 教学视频</a> 点击观看
目前 Vue 分类中部分文章内容参考至 B 站一个 Vue 教学视频</p>
</blockquote>
<p>其中部分内容直接出至教学视频中老师 PPT 中的内容</p>
<p>因为本人是第一次学习 Vue，难免文章中会出现纰漏，还望指正</p>
<p>下面为本篇文章正文</p>
<h1 id="vue-实例">Vue 实例</h1>
<p>下面书写一段 Vue 代码体验一下，Hello Word 大法</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;text&#34;</span><span class="p">&gt;</span>{{content}}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">temp</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">  <span class="nx">el</span><span class="o">:</span> <span class="s2">&#34;#text&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">content</span><span class="o">:</span> <span class="s2">&#34;Hello World&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl"><span class="p">});</span>
</span></span></code></pre></div><p>打开网页，查看效果</p>
<blockquote>
<p>说明：Vue 是一个构造函数，首先创建一个 Vue 实例，传入的参数是一个对象 (options)，对象内有许多定义好的属性，通过操作对应的属性值，就可以管理 Dom 元素</p>
</blockquote>
<h2 id="实例属性">实例属性</h2>
<p>我们知道一个 Vue 实例，会传入一个对象类型的参数，即 options，而这个对象内的属性已经是 Vue 定义好的，我们通过知道该属性的作用及用法，便可以操作挂载好的 Dom 元素了，属性如下</p>
<h3 id="el-属性">el 属性</h3>
<blockquote>
<p>类型：String | HTMLElement</p>
<p>作用：挂载 Dom 对象到 Vue 实例中，然后进行管理</p>
</blockquote>
<p>el 属性用来绑定某个 Dom 元素，或者称其为挂载，然后对其进行管理，属性值可以像 jquery 一样进行选择元素，如上代码所示，还可以使用原生 Js 进行选择，如下：</p>
<blockquote>
<p>el: document.getElementById( &rsquo;text&rsquo; );</p>
</blockquote>
<h3 id="data-属性">data 属性</h3>
<blockquote>
<p>类型：Object | Function</p>
<p>作用：Vue 实例对应的数据对象</p>
</blockquote>
<p>data 属性用来定义一些变量，存放着需要用到的数据，如上述代码中，data 属性中定义了一个 content ，值是一个字符串的 &lsquo;Hello World&rsquo;，然后在页面中需要显示这段话，可以如 HTML 代码中一样，使用 {{content}} 将变量内的值显示到页面中，{{变量名}} 这种语法称之为 mustache 语法，后面还会有介绍</p>
<h3 id="methods-属性">methods 属性</h3>
<blockquote>
<p>类型：{ [key: string]: Function }</p>
<p>作用：定义属于 Vue 的一些方法，可以在其他地方调用也可以在指令中使用</p>
</blockquote>
<p>这个属性虽然没有在上面的例子中体现出来，不过大概来说，就是在这个属性中定义些方法，定义好的方法，可以在指令或者在 mustache 语法中被调用，然后执行方法内的命令，这个属性是方法的集合，下面通过一个例子体验一下</p>
<h4 id="例子">例子</h4>
<p>HTML 代码如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">main</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>{{num}}<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">button</span> <span class="na">v-on:click</span><span class="o">=</span><span class="s">&#34;add()&#34;</span><span class="p">&gt;</span>+<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">button</span> <span class="na">v-on:click</span><span class="o">=</span><span class="s">&#34;less()&#34;</span><span class="p">&gt;</span>-<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">main</span><span class="p">&gt;</span>
</span></span></code></pre></div><p>Js 代码如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">temp</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">  <span class="nx">el</span><span class="o">:</span> <span class="s2">&#34;main&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">num</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl">  <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">add</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">      <span class="k">this</span><span class="p">.</span><span class="nx">num</span><span class="o">++</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="p">},</span>
</span></span><span class="line"><span class="cl">    <span class="nx">less</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">      <span class="k">this</span><span class="p">.</span><span class="nx">num</span><span class="o">--</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="p">},</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl"><span class="p">});</span>
</span></span></code></pre></div><p>通过 v-on 指令加上点击事件调用了方法，实现了计数器的功能，其中 v-on 等指令相关的内容稍后再去了解，我们还可以使用如下代码，实现和上面一样的功能，前提是 num 变量已经在 data 中定义好，如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">main</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>{{num}}<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">button</span> <span class="na">v-on:click</span><span class="o">=</span><span class="s">&#34;num++&#34;</span><span class="p">&gt;</span>+<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">button</span> <span class="na">v-on:click</span><span class="o">=</span><span class="s">&#34;num--&#34;</span><span class="p">&gt;</span>-<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">main</span><span class="p">&gt;</span>
</span></span></code></pre></div><p>这样一来就用不到 methods 属性来定义方法实现了，这里需要注意的是，定义在 methods 属性内的方法，若想在方法内访问变量，需要在前面加上 this 关键字，这样一来，我们就完成了 Vue 的一些基本操作，通过上面的几个例子来看，通过 Vue 来管理 Dom 元素，较为灵活，并且该元素用到的数据和方法，分别通过 data 和 methods 属性来定义，这种归类方式简直不要太爽</p>
<br>
<blockquote>
<p>注意：<br>在 options 对象中的属性 data 和 methods 中定义的变量或者方法，只能在 el 绑定的 Dom 元素内使用，还有就是，实例中的属性并不只有以上四种，后续会对其他属性进行介绍</p>
</blockquote>
</div>
                    <div class="post_footer">
                        
                        
                        <div id="link">
                            <p>本博客所有文章除特别声明外，均采用 CC BY-SA 3.0协议 。转载请注明出处！</p>
                            <p><span id="link_href"></span><i class="ri-file-copy-2-line link_btn"></i></p>
                        </div>
                        
                        <div class="meta">
                            <div class="info">
                                <span class="field tags">
                                    <i class="ri-price-tag-2-line"></i>
                                    
                                    <a href="https://awesome404.gitee.io/tags/vue2/">Vue2</a>
                                    
                                </span>
                            </div>
                        </div>
                        
                    </div>
                </div>
                
                
            </div>
        </div>
    </div>
    <a id="back_to_top" href="#" class="back_to_top"><i class="ri-arrow-up-s-line"></i></a>
    
<style>
  #hitokoto {
    overflow: hidden;
    margin: 0 auto;
    width: 80%;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    color: #424242;
  }

  .footer {
    padding: 30px 0px;
  }
</style>

<footer class="footer">
  <p id="hitokoto">:D 获取中...</p>
</footer>

<script>
  fetch("https://v1.hitokoto.cn")
    .then((response) => response.json())
    .then((data) => {
      const hitokoto = document.getElementById("hitokoto");
      hitokoto.href = "https://hitokoto.cn/?uuid=" + data.uuid;
      hitokoto.innerText = data.hitokoto;
    })
    .catch((err) => err);
</script>

    <script src="https://awesome404.gitee.io/js/jquery-3.5.1.min.js"></script>
<link href="https://awesome404.gitee.io/css/fancybox.min.css" rel="stylesheet">
<script src="https://awesome404.gitee.io/js/fancybox.min.js"></script>
<script src="https://awesome404.gitee.io/js/zozo.js"></script>




</body>


<script>
    (function (){
        
        function handleIcon (remove, target){
            this.classList.remove(remove);
            this.classList.add(target);
        }

        let hrefEl = document.getElementById("link_href");
        let copyBtn = document.getElementsByClassName("link_btn")[0];
        if (hrefEl){
            hrefEl.innerText = `文章链接: ${location.href}`;
            
            copyBtn.onclick = (event) => {
                
                navigator.clipboard.writeText(`文章转载自: ${location.href}`)
                
                handleIcon.call(event.target, "ri-file-copy-2-line", "ri-check-line");
                let timer = setTimeout(() => {
                    handleIcon.call(event.target, "ri-check-line", "ri-file-copy-2-line");
                    clearTimeout(timer)
                }, 1000)
            }
        }
    })();
</script>
</html>